<template>
  <div>
    <el-dialog :title="pageTittle" :visible="addshow" @close="canseDia">
      <el-form :model="form" label-width="100px" :rules="rules" ref="myform">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="部门编码" prop="code">
          <el-input v-model="form.code" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="部门负责人" prop="manager">
          <el-select v-model="form.manager" placeholder="请选择">
            <el-option
              v-for="(item, index) in userList"
              :key="index"
              :label="item.username"
              :value="item.username"
            ></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model="form.introduce" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canseDia">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//导入获取组织架构的方法
import { getDepartmentsApi, addDepartApi, getDepIdApi ,editDepartApi} from '@/api/departments'
//获取员工简单列表
import { getEmplListApi } from '@/api/employees'
export default {
  //addshow:控制面板的显示与隐藏
  //currentObj：当前操作的部门对象
  props: ['addshow', 'currentObj'],
  data () {
    return {
      form: {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      },
      rules: {
        name: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '名称为1~50个字符', trigger: 'blur' },
          //部门名称要求：同级部门名称不能重复
          {
            validator: async (rule, value, callback) => {
              //rule:当前需要校验的参数；callback:成功回调；失败回调：callback(new Error('提示'))
              //(1)得到当前操作的部门对象：currentObj
              //(2)得到所有的部门数据
              //(1)步骤一：得到所有的部门数据
              const res = await getDepartmentsApi()
              if (!this.form.id) {
                //不存在即代表是新增部门
                // console.log(res);
                //(2)步骤二：根据当前操作的部门对象Id得到所有的同级部门
                const partArr = res.data.depts.filter(item => {
                  return item.pid === this.currentObj.id
                })
                //(3)步骤三：判断当前部门名是否与同级部门中有相同重复
                const bool = partArr.some(item => {
                  return item.name === value
                })
                bool ? callback(new Error('部门名称不能重复')) : callback()
              } else {
                //存在的话就是编辑部门
                //编辑的规则currentObj:当前操作的部门对象;与同级子部门不能重复，将自己从子部门排除
                res.data.depts.some(item => {
                  item.name === value &&
                    item.pid === this.currentObj.pid &&
                    item.id !== this.form.id
                })
                  ? callback(new Error('部门名称不能重复'))
                  : callback()
              }
            },
            trigger: 'blur'
          }
        ],
        code: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '名称为1~50个字符', trigger: 'blur' },
          {
            validator: async (rule, value, callback) => {
              //获取所有部门数据
              const res = await getDepartmentsApi()
              if (!this.form.id) {
                //不存在就是新增
                //判断所有的数据中的code是否与value相同
                res.data.depts.some(item => item.code === value)
                  ? callback(new Error('部门编码不能重复'))
                  : callback()
              } else {
                //存在就是编辑
                //判断所有的数据中code是否与value相同
                res.data.depts.some(
                  item => item.code === value && item.id !== this.form.id
                )
                  ? callback(new Error('部门编码不能重复'))
                  : callback()
              }
            },
            trigger: 'blur'
          }
        ],
        manager: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' }
        ],
        introduce: [
          { required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '名称为1~50个字符', trigger: 'blur' }
        ]
      },
      //部门负责人数据：
      userList: []
    }
  },
  computed: {
    //根据计算属性显示控制标题：即面板是属于新增还是编辑
    pageTittle: function () {
      return this.form.id ? '编辑部门' : '新增部门'
    }
  },
  methods: {
    //得到当前操作部门的数据源
    //id:当前操作部门的Id
    async getItem (id) {
      const res = await getDepIdApi(id)
      console.log(res)
      //保存数据源
      this.form = res.data
    },
    //点击取消按钮
    canseDia () {
      //(2)关闭新增面板
      this.$emit('closeDialog', false)
      //(3)清空数据源
      this.form = {
        name: '',
        code: '',
        manager: '',
        introduce: ''
      }
      //重置表单的校验
      this.$refs.myform.resetFields()
    },
    async getUserInfo () {
      const res = await getEmplListApi()
      //   console.log(res)
      //添加部门负责人数据
      this.userList = res.data
    },
    //点击确定按钮所操作的事件
    submit () {
      //添加全局验证规则
      this.$refs.myform.validate(async val => {
        if (val) {
          //通过验证
          //(1)提交数据到后台
          if (!this.form.id) {
            //不存在就是新增
            await addDepartApi({
              ...this.form,
              pid: this.currentObj.pid === '-1'?'':this.currentObj.id
            })
          }else{
            //存在就是编辑
            await editDepartApi(this.form)
          }
          //(2)关闭新增面板
          this.$emit('closeDialog', false)
          //提示新增成功
          this.$message.success('新增部门成功')
          //更新页面数据
          this.$emit('updateData')
          //(5)清空表单中的数据
          this.form = { name: '', code: '', manager: '', introduce: '' }
        } else {
          //验证失败
          console.log('数据验证失败')
        }
      })
    }
  },
  created () {
    this.getUserInfo()
  }
}
</script>

<style></style>
